<template>
    <div class="conts">
        <header>
            <ul>
                <li v-for="item in headerList" :class="item.path === path ?  'active' : ''" :key="item.path" @click="changePage(item.path)">
                    <h3>{{ item.label }}</h3>
                </li>
            </ul>
        </header>
        <div>
            <router-view />

            <!-- 挂载子应用节点 -->
            <div id="app" class="ziApp"></div>
        </div>
    </div>
</template>

<script>

export default {
    data () {
        return {
            headerList: [{
                path: '/',
                label: '主应用'
            },
            {
                path: '/app1',
                label: '微应用APP1'
            }],
            path: undefined,
        }
    },
    mounted () {
        this.path = this.headerList[0].path
    },  
    methods: {
        changePage (path) {
            this.path = path
            this.$router.push({
                path: path
            }, () => {})
        }
    }
}
</script>

<style scoped>
    ul li{
        list-style: none;
    }
    header ul li {
        opacity: 0.5;
    }
    header ul li.active{
        opacity: 1;
    }
    header ul li:hover{
        opacity: 0.5;
        cursor: pointer;
    }
    h3{
        color: #fff;
    }
    header ul{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    h3, ul, ul li{
        padding: 0;
        margin: 0;
    }
    header{
        padding: 12px 800px;
        background-color: #000;
    }
    
    .conts{
        background-color: #eee;
    }
</style>